<div class="container-fluid">
  <div class="row">
      <div class="col-auto">
          <button class="btn btn-secondary btn-block"
              routerLink="/table" routerLinkActive="bg-primary"
              [routerLinkActiveOptions]="{exact: true}">
              All
          </button>
          <button *ngFor="let category of categories"
                  class="btn btn-secondary btn-block px-3"
                  [routerLink]="['/table', category]"
                  routerLinkActive="bg-primary">
              {{category}}
          </button>
      </div>
      <div class="col">
          <button class="btn btn-info mx-1" routerLink="products">
            Count Products
        </button>
        <button class="btn btn-primary mx-1" routerLink="categories">
              Count Categories
          </button>
          <button class="btn btn-secondary mx-1" routerLink="/table">
              Count Neither
          </button>
          <div class="my-2">
              <router-outlet></router-outlet>
          </div>
          <table class="table table-sm table-bordered table-striped">
              <tr>
                  <th>ID</th><th>Name</th><th>Category</th><th>Price</th><th></th>
              </tr>
              <tr *ngFor="let item of getProducts()">
                  <td>{{item.id}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.category}}</td>
                  <td>{{item.price | currency:"USD" }}</td>
                  <td class="text-center">
                      <button class="btn btn-danger btn-sm mr-1"
                              (click)="deleteProduct(item.id)">
                          Delete
                      </button>
                      <button class="btn btn-warning btn-sm"
                          [routerLink]="['/form', 'edit', item.id]">
                          Edit
                      </button>
                  </td>
              </tr>
          </table>
      </div>
  </div>
</div>
<div class="p-2 text-center">
  <button class="btn btn-primary m-1" routerLink="/form/create">
      Create New Product
  </button>
  <button class="btn btn-danger" (click)="deleteProduct(-1)">
      Generate HTTP Error
  </button>
  <button class="btn btn-danger m-1" routerLink="/does/not/exist">
      Generate Routing Error
  </button>
</div>
